// import { Suspense } from 'react'

// const sleep = ms => new Promise(r=> setTimeout(r,ms))

// async function PostFeed(){
//     await sleep(2000)
//     return <h1>Hello PostFeed</h1>
// }

// async function Weather(){
//     await sleep(8000)
//     return <h1>Hello Weather</h1>
// }

// async function Recommend(){
//     await sleep(5000)
//     return <h1>Hello Recommend</h1>
// }

// export default function Dashbord(){
//     return (
//         <section style={{padding: '20px'}}>
//             <Suspense fallback={<p>Loading... PostFeed Component</p>}>
//                 <PostFeed />
//             </Suspense>
//             <Suspense fallback={<p>Loading... Weather Component</p>}>
//                 <Weather />
//             </Suspense>
//             <Suspense fallback={<p>Loading... Recommend Component</p>}>
//                 <Recommend />
//             </Suspense>
//         </section>
//     )
// }


// 上面的代码报错
import React,{ Suspense } from 'react';

// 模拟延迟
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// 使用 React.lazy 懒加载组件
const PostFeed = React.lazy(async () => {
  await sleep(2000);
  return { default: () => <h1>Hello PostFeed</h1> };
});

const Weather = React.lazy(async () => {
  await sleep(8000);
  return { default: () => <h1>Hello Weather</h1> };
});

const Recommend = React.lazy(async () => {
  await sleep(5000);
  return { default: () => <h1>Hello Recommend</h1> };
});

//  suspense 不止loading,它还是分块传输编码 Chunked transfer encoding
export default function Dashboard() {
  return (
    <section style={{ padding: '20px' }}>
      <Suspense fallback={<p>Loading... PostFeed Component</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading... Weather Component</p>}>
        <Weather />
      </Suspense>
      <Suspense fallback={<p>Loading... Recommend Component</p>}>
        <Recommend />
      </Suspense>

    {/* 这种的就是要8(最长的请求时间)秒才能看见页面，她是最终一起的呈现，等待的时间比较长 */}
      {/* <PostFeed />
      <Weather />
      <Recommend /> */}
    </section>
  );
}